<template>
    <div class="sify">
        <ul>
            <li v-for = "(data,index) in datas">
                <div>{{data.zimu}}</div>
                <p @click="xuan" v-for = "item in data.shi">{{item}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
    import bus from '../assets/bus'
    import { Tabbar, TabbarItem, Group, Cell } from 'vux'
    export default {
        components: {
            Tabbar,
            TabbarItem,
            Group,
            Cell,
        },
        data() {
            return {
                dizhi:'',
                datas:[
                    {   
                        zimu:'A',
                        shi:['安徽']
                    },
                    {
                        zimu:'B',
                        shi:['北京']
                    },
                    {
                        zimu:'C',
                        shi:['重庆']
                    },
                    {
                        zimu:'F',
                        shi:['福建']
                    },
                    {
                        zimu:'G',
                        shi:['甘肃','广东','广西','贵州']
                    },
                    {
                        zimu:'H',
                        shi:['海南','河北','河南','黑龙江','湖北','湖南']
                    },
                    {
                        zimu:'J',
                        shi:['吉林','江苏','江西']
                    },
                    {
                        zimu:'L',
                        shi:['辽宁']
                    },
                    {
                        zimu:'N',
                        shi:['内蒙古东','内蒙古西','宁夏']
                    },
                    {
                        zimu:'Q',
                        shi:['青海']
                    },
                    {
                        zimu:'S',
                        shi:['山东','山西','陕西','上海','四川']
                    },
                    {
                        zimu:'T',
                        shi:['天津']
                    },
                    {
                        zimu:'X',
                        shi:['西藏','新疆']
                    },
                    {
                        zimu:'Y',
                        shi:['云南']
                    },
                    {
                        zimu:'Z',
                        shi:['浙江']
                    }
                ]
            }
        },
        methods:{
            xuan:function(ev){
                var that = this;
                $('p').removeClass('active')
                let pp = ev.target;
                $(pp).addClass('active')
                that.dizhi =  $(pp).html();
                bus.$emit('dizhi',that.dizhi);
                location.href="#/"
            }
        }
    
    }
</script>
<style scoped>
    .active{
        color: #cc0000;
    }
  ul{
      width: 100%;
      border-right: 1px solid #ccc;
      cursor: pointer;
  }
  li > div{
      
      padding: 0 20px;
      line-height: 20px;
      background: #ddd;
      border-bottom: 1px solid #ccc;
  }
  li > p{
      padding: 0 18px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
  }
    
</style>